<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        table {
            width: 600px;
            margin: 10px auto;
            border: 1px solid #ddd;
            border-collapse: collapse;
            color: #666;
            font-size: 14px;
        }
        
        table th {
            width: 100px;
            border: 1px solid #ddd;
        }
        
        table tr {
            height: 70px;
        }
        
        table td {
            padding-left: 10px;
            border: 1px solid #ddd;
        }
        
        button {
            height: 30px;
            width: 50px;
            color: #fff;
            text-align: center;
            border-radius: 4px;
            border: none;
            background-color: #87CEEB;
        }
        
        .seatchContainer {
            color: #666;
            font-size: 14px;
            text-align: center;
        }
        
        .seatchContainer input {
            margin: 0 30px;
            height: 30px;
            width: 200px;
            border: 1px solid #ddd;
            border-radius: 4px;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <search-cpm @search="search" @showall="showAll"></search-cpm>
        <info-table :titles="titles" :info="info" :total="totalPrice" @del="del"></info-table>
    </div>
</body>

<template id="searchCmp">
    <div class="seatchContainer">
        名称 <input type="text" placeholder="请输入搜索内容" v-model="searchTxt" @input="searchTxtChange"><button @click="search">查询</button>
    </div>
</template>
<template id="tableCmp">
    <div>
        <table>
            <thead>
                <tr>
                    <th v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in info" :key="item.id" v-show="item.is_show">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.price_info}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
                <tr><td colspan="4">总价格{{total | keyTwo}}</td></tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    //搜索组件
    let searchCpm = {
        template: '#searchCmp',
        data() {
            return {
                searchTxt: ''
            }
        },
        methods: {
            search() {
                if (this.searchTxt.trim()) {
                    this.$emit('search', this.searchTxt)
                }
            },
            searchTxtChange(e) {
                if (e.target.value == '') {
                    this.$emit('showall')
                }
            }
        },

    }

    //表格组件
    let infoTable = {
        template: '#tableCmp',
        props: ['titles', 'info', 'total'],
        methods: {
            del(index) {
                this.$emit('del', index)
            }
        },
        filters: {
            keyTwo(val) {
                return val.toFixed(2)
            }
        }
    }

    new Vue({
        el: '#app',
        data: {
            titles: ["ID", "主标题", "起步价格", "操作"],
            info: [{
                "id": 287,
                "title": "严选新式样板间",
                "price_info": 29.9,
                "is_show": true
            }, {
                "id": 286,
                "title": "无“油”无虑的甜蜜酥脆",
                "price_info": 45,
                "is_show": true
            }, {
                "id": 283,
                "title": "孩子成长中少不了的一双鞋",
                "price_info": 78,
                "is_show": true
            }, {
                "id": 282,
                "title": "成就一室笋香1",
                "price_info": 121,
                "is_show": true
            }, {
                "id": 281,
                "title": "条纹新风尚",
                "price_info": 29,
                "is_show": true
            }, {
                "id": 277,
                "title": "治愈生活的满怀柔软",
                "price_info": 66.78,

                "is_show": true
            }, {
                "id": 274,
                "title": "没有软木拖，怎么过夏天",
                "price_info": 50.99,
                "is_show": true
            }, {
                "id": 272,
                "title": "料理也要精细简单",
                "price_info": 69,
                "is_show": true
            }, {
                "id": 271,
                "title": "选式新懒人",
                "price_info": 15.3,
                "is_show": true
            }, {
                "id": 268,
                "title": "米饭好吃的秘诀：会呼吸的锅",
                "price_info": 20.1,
                "is_show": true
            }]
        },
        methods: {
            //删除某个
            del(index) {
                this.info.splice(index, 1)
            },
            //搜索
            search(val) {
                this.info.forEach(item => {
                    if (item.title.indexOf(val) == -1) {
                        item.is_show = false
                    }
                })
            },
            //显示全部
            showAll() {
                this.info.forEach(item => {
                    item.is_show = true
                })
            }
        },
        computed: {
            //总价
            totalPrice() {
                return this.info.reduce((prev, current) => {
                    if (current.is_show) {
                        return prev + current.price_info
                    } else {
                        return prev + 0
                    }

                }, 0)
            }
        },
        components: {
            infoTable,
            searchCpm
        }
    })
</script>

</html>